<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8"/>
    <title>登录</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta
            name="viewport"
            content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
    <meta name="format-detection" content="telephone=no"/>
    <meta name="renderer" content="webkit"/>
    <meta http-equiv="Cache-Control"/>

    <link rel="stylesheet" href="static/css/amazeui.css"/>
    <link href="static/css/dlstyle.css" rel="stylesheet" type="text/css"/>
    <link rel="stylesheet" href="static/css/bootstrap.min.css"/>
</head>

<body>
<div class="login-boxtitle" style="height: 100px">
    <div class="logoBig">
        <img
                src="static/images/logo.png"
                style="margin-left: 0px; height: 100px"
        />
    </div>
</div>

<div class="login-banner">
    <div class="login-main">
        <div class="login-banner-bg">
            <span></span><img src="static/images/big.jpg"/>
        </div>
        <div class="login-box" style="margin-top: 20px" id="container">
            <h3 class="title">登录商城</h3>
            <h5 :style="colorStyle" id="tips">{{tips}}&nbsp;</h5>
            <div class="clear"></div>

            <div class="login-form" style="background: none; margin-top: 15px">
                <form>
                    <div class="user-name" style="margin-top: 20px">
                        <label for="user"
                        ><span
                                class="glyphicon glyphicon-user"
                                aria-hidden="true"
                        ></span
                        ></label>
                        <input
                                type="text"
                                v-model="username"
                                placeholder="邮箱/手机/用户名"
                                @keyup="checkInfo"
                        />
                    </div>
                    <div class="user-pass" style="margin-top: 20px">
                        <label for="password"
                        ><span
                                class="glyphicon glyphicon-lock"
                                aria-hidden="true"
                        ></span
                        ></label>
                        <input
                                type="password"
                                v-model="password"
                                placeholder="请输入密码"
                                @keyup="checkInfo"
                        />
                    </div>
                </form>
            </div>

            <div class="login-links">
                <label for="remember-me"
                ><input id="remember-me" type="checkbox"/>记住密码</label
                >
                <a href="#" class="am-fr">忘记密码</a>
                <br/>
            </div>
            <div class="am-cf">
                <input
                        type="button"
                        @click="doSubmit"
                        value="登 录"
                        class="am-btn am-btn-primary am-btn-sm"
                />
            </div>
            <div class="am-cf">
                <input
                        type="button"
                        onclick="javascript:window.location.href='register.html'"
                        value="注 册"
                        class="am-btn am-btn-default am-btn-sm"
                />
            </div>
            <div class="partner"></div>
        </div>
    </div>
</div>

<div class="footer">
    <div class="footer-hd"></div>
    <div class="footer-bd">
        <p>
            <a href="# ">联系我们</a>
            <a href="# ">网站地图</a>
        </p>
    </div>
</div>
<script type="text/javascript" src="static/js/jquery-1.9.min.js"></script>
<script type="text/javascript" src="static/js/cookie_utils.js"></script>
<script src="static/js/axios.min.js"></script>
<script src="static/js/vue.min.js"></script>
<script type="text/javascript">
    var baseUrl = "http://localhost:8080/";
    var vm = new Vue({
        el: "#container",
        data: {
            username: "",
            password: "",
            colorStyle: "",
            tips: "",
            // 校验结果的变量
            isRight: false,
        },
        methods: {
            doSubmit() {
                // 验证isRight
                if (vm.isRight) {
                    var url = baseUrl + "user/login";
                    //调用登录接口
                    axios
                        .get(url, {
                            params: {username: vm.username, password: vm.password},
                        })
                        .then((result) => {
                            vo = result.data;
                            console.log(vo)
                            if (vo.code == 10000) {
                                // 如果登陆成功，将token封装到cookie中
                                setCookieValue("token", vo.msg);
                                // 将用户信息保存在cookie中
                                setCookieValue("username", vo.data.username);
                                setCookieValue("userImg", vo.data.useImg)
                                window.location.href = "index.html";
                            } else {
                                vm.tips = "登录失败，账号或密码错误！";
                                vm.colorStyle = "color:red";
                            }
                        })
                        .catch((err) => {
                        });
                } else {
                    vm.tips = "请正确输入账号密码！";
                }
            },
            checkInfo() {
                if (vm.username == "") {
                    vm.tips = "请输入账号!";
                    vm.colorStyle = "color:red";
                    vm.isRight = false;
                } else if (vm.username.length < 8 || vm.username.length > 20) {
                    vm.tips = "账号长度必须为8-20个字符!";
                    vm.colorStyle = "color:red";
                    vm.isRight = false;
                } else {
                    // 账号合法校验密码
                    if (vm.password == "") {
                        vm.tips = "密码不能为空!";
                        vm.colorStyle = "color:red";
                        vm.isRight = false;
                    } else if (vm.password.length < 6 || vm.password.length > 16) {
                        vm.tips = "密码长度必须为6-16个字符!";
                        vm.colorStyle = "color:red";
                        vm.isRight = false;
                    } else {
                        vm.tips = "";
                        vm.colorStyle = "";
                        vm.isRight = true;
                    }
                }
            },
        },
    });
</script>
</body>
</html>
